<template>
<div class="content-center content-cotainer">
  <!-- 页面标签/页面tab -->
  <!-- 面包屑 -->
  <div class="content-breadcrumb">
    <el-breadcrumb separator="/" class="breadcrumb">
      <el-breadcrumb-item :to="{ path: '/' }">审计分析</el-breadcrumb-item>
      <el-breadcrumb-item>审计报告提纲</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <div class="audit-content">
    <div class="centent-title">
      <span>{{title}}</span>
    </div>
    <!-- 页面内容 -->
    <div class="centent-inner">
      <br />
      <el-row class="content-row">
        <el-button type="primary" size="small" @click="showTree" style="margin-left:10px;">生成报告提纲</el-button>
        <el-button type="primary" size="small" @click="jumpToTest">生成报告初稿</el-button>
        <el-button type="primary" size="small" @click="addToFrame">添加至框架</el-button>
        <el-button class="btn-right btn-right-side" type="primary" size="small" @click="backToReportPage">退出</el-button>
        <el-button class="btn-right" type="primary" size="small">保存</el-button>
        <el-button class="btn-right" type="primary" size="small" @click="reviewdialogVisible = true">预览</el-button>
      </el-row>
      <el-dialog title="审计报告预览" :visible.sync="reviewdialogVisible">
        <el-input type="text"></el-input>
        <span slot="footer" class="dialog-footer">
          <el-button @click="reviewdialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="reviewdialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
      <br />
      <el-row class="bottom-row">
        <div class="inner-box">
          <div class="inner-left">
            <div class="inner-header">文档模版分类</div>
            <div class="inner-left-content">
              <el-tree ref="doctree" :data="data0" node-key="id" show-checkbox default-expand-all @check="checkchange" @node-drag-start="handleDragStart" @node-drag-enter="handleDragEnter" @node-drag-leave="handleDragLeave" @node-drag-over="handleDragOver" @node-drag-end="handleDragEnd" @node-drop="handleDrop" draggable :allow-drop="allowDrop" :allow-drag="allowDrag"></el-tree>
            </div>
          </div>
          <div class="inner-left">
            <div class="inner-header">审计报告框架</div>
            <div class="inner-right-content">
              <el-tree :data="data1" node-key="id" default-expand-all @node-drag-start="handleDragStart" @node-drag-enter="handleDragEnter" @node-drag-leave="handleDragLeave" @node-drag-over="handleDragOver" @node-drag-end="handleDragEnd" @node-drop="handleDrop" draggable :allow-drop="allowDrop" :allow-drag="allowDrag">
                <span class="custom-tree-node" slot-scope="{ node, data }">
                  <span>{{ node.label }}</span>
                  <span v-show="data.busiSrcType === '20'">
                    <el-button
                      type="text"
                      size="mini"
                      @click="() => remove(node, data)">
                      Delete
                    </el-button>
                  </span>
                </span>
              </el-tree>
            </div>
          </div>
          <div class="inner-left">
            <div class="inner-header">审计报告提纲</div>
            <div class="inner-right-content">
              <el-tree style="background-color:white" :data="data2" show-checkbox node-key="id" default-expand-all @node-drag-start="handleDragStart" @node-drag-enter="handleDragEnter" @node-drag-leave="handleDragLeave" @node-drag-over="handleDragOver" @node-drag-end="handleDragEnd" @node-drop="handleDrop" draggable :allow-drop="allowDrop" :allow-drag="allowDrag" :expand-on-click-node="false"></el-tree>
            </div>
          </div>
        </div>
        <!-- <el-col :span="7">
          <div class="inner-box">文档模板分类</div>
          <el-tree :data="data0" node-key="id" default-expand-all @node-drag-start="handleDragStart" @node-drag-enter="handleDragEnter" @node-drag-leave="handleDragLeave" @node-drag-over="handleDragOver" @node-drag-end="handleDragEnd" @node-drop="handleDrop" draggable :allow-drop="allowDrop" :allow-drag="allowDrag">
          </el-tree>
        </el-col>
        <el-col :span="1">&nbsp;</el-col>
        <el-col class="col-item" :span="7">
          <div class="content-operation">审计报告框架</div>
          <el-tree :data="data1" node-key="id" default-expand-all @node-drag-start="handleDragStart" @node-drag-enter="handleDragEnter" @node-drag-leave="handleDragLeave" @node-drag-over="handleDragOver" @node-drag-end="handleDragEnd" @node-drop="handleDrop" draggable :allow-drop="allowDrop" :allow-drag="allowDrag">
          </el-tree>
        </el-col>
        <el-col :span="1">&nbsp;</el-col>
        <el-col class="col-item" :span="7">
          <div class="content-operation">审计报告提纲</div>
          <div class="content-tree" v-show="show">
            <el-tree style="background-color:white" :data="data2" show-checkbox node-key="id" default-expand-all @node-drag-start="handleDragStart" @node-drag-enter="handleDragEnter" @node-drag-leave="handleDragLeave" @node-drag-over="handleDragOver" @node-drag-end="handleDragEnd" @node-drop="handleDrop" draggable :allow-drop="allowDrop" :allow-drag="allowDrag" :expand-on-click-node="false">
            </el-tree>
          </div>
        </el-col> -->
      </el-row>
      <!-- 生成报告提纲，录入提纲名称 -->
      <el-dialog
        title="提纲名称"
        :visible.sync="dialogVisible"
        width="50%" :close-on-click-modal="false">
        <span>提纲名称:<el-input v-model="outlineNm"></el-input></span>
        <span slot="footer" class="dialog-footer">
          <el-button size="small" @click="dialogVisible = false">取 消</el-button>
          <el-button size="small" type="primary" @click="sureoutlineNm">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 生成报告初稿，录入报告名称 -->
      <el-dialog
        title="报告名称"
        :visible.sync="reportdialogVisible"
        width="50%" :close-on-click-modal="false">
        <span>报告名称:<el-input v-model="reportname"></el-input></span>
        <span slot="footer" class="dialog-footer">
          <el-button size="small" @click="reportdialogVisible = false">取 消</el-button>
          <el-button size="small" type="primary" @click="editreportname">确 定</el-button>
        </span>
      </el-dialog>
    <!-- 添加底稿到框架树 -->
      <el-dialog
      title="选择存放的节点"
      :visible.sync="dialogVisible1"
      width="50%" :close-on-click-modal="false">
      <el-tree ref="tree" :data="data3" node-key="id" check-strictly @check="checkChange1" show-checkbox default-expand-all></el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible1 = false">取 消</el-button>
        <el-button size="small" type="primary" @click="sureAddToFrame">确 定</el-button>
      </span>
    </el-dialog>
    </div>
  </div>
</div>
</template>

<script>
import axios from 'axios'
import { guid } from "../../utils/getuuid"
export default {
  data() {
    return {
      draftlist: [],
      outlinelist: [],
      reportname: '',
      data3: [],
      checkeddraft: [],
      outlineNm: '',
      dialogVisible: false,
      dialogVisible1: false,
      reportdialogVisible: false,
      reviewdialogVisible: false,
      show: false,
      title: '审计报告提纲',
      options: [{
        value: '模板1',
        label: '审计报告模板1'
      }, {
        value: '模板2',
        label: '审计报告模板2'
      }],
      value: '',
      data0: [{
        id: 1,
        label: '某同志任期经济责任审计',
        disabled: true,
        children: [
          {
            id: 2,
            label: '审计底稿',
            children: []
          }
        ]
      }],
      data1: [{
        id: '',
        label: '',
        disabled: true,
        children: []
      }],
      data2: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  mounted () {
    // 查询框架
    let info = {
      //auditRptId;			//审计报告id
      docuMouldId: this.$route.query.id,
      auditPrjId:	'00000001',	//审计项目id
      auditPrjName:	'预埋经济责任审计1',//审计项目名称
      auditGroupId:	'10000001',	//审计组
      auditGroupName:	'湖北子审计组',//审计组名称
      operPsnId:	'0001',//操作人id
      operPsnName:	'0001',//操作人名称
      // operPsnInstId:	'',//操作人机构id
      // operPsnInstName:	''//操作人机构名称
    }
    console.log(info)
    this.data1 = []
    this.outlinelist = []
    axios.post('http://localhost:7111/tOesRpt/createTOesDocmdItmBackRptStru', info).then((response) => {
      console.log(response)
      if (response.data && Array.isArray(response.data) && response.data.length >0) {
        this.outlinelist = response.data
        this.data1 = this.generateOptions(response.data)
      }
      console.log(this.data1)
    }).catch((response) => {
      console.log(response)
    })
    // 查询底稿
    axios.post('http://localhost:7111/auditWorkerDraft/findWorkDraftList', {}).then((response) => {
      console.log(response)
      if (response.data.obj && Array.isArray(response.data.obj) && response.data.obj.length >0) {
        this.draftlist = response.data.obj
        this.draftlist.forEach(item => {
          this.data0[0].children[0].children.push({
            id: item.auditDraftId,
            auditDraftId: item.auditDraftId,
            label: item.auditDraftNm,
            disabled: false
          })
        })
      }
      // console.log(this.data1[0].children)
    }).catch((response) => {
      console.log(response)
    })
  },
  methods: {
    getOutLineTree(params) { //生成Cascader级联数据
      let result = []
      for (let param of params) {
        if (param.prtOutlnitmId === '0') { //判断是否为顶层节点
          let parent = Object.assign({ //转换成el-Cascader可以识别的数据结构
            id: param.outlnItmId,
            label: param.outlnItmDsc,
            busiSrcType: param.busiSrcType
            // ,
            // disabled: true
          },param)
          parent.children = this.getoutlinechilds(param.outlnItmId, params) //获取子节点
          result.push(parent)
        }
      }
      return result
    },
    getoutlinechilds(id, array) {
      console.log(id,array)
      let childs = new Array()
      for (let arr of array) { //循环获取子节点
        if (arr.prtOutlnitmId === id) {
          childs.push(
            Object.assign(arr,{
              id: arr.outlnItmId,
              label: arr.outlnItmDsc,
              busiSrcType: arr.busiSrcType
            })
          )
        }
      }
      for (let child of childs) { //获取子节点的子节点
        let childscopy = this.getoutlinechilds(child.id, array); //递归获取子节点
        console.log(childscopy)
        if (childscopy.length > 0) {
          child.children = childscopy
        }
      }
      return childs
    },
    generateOptions(params) { //生成Cascader级联数据
      var result = [];
      for (let param of params) {
        if (param.parentStruId === '0') { //判断是否为顶层节点
          var parent = Object.assign({ //转换成el-Cascader可以识别的数据结构
            id: param.rptStruId,
            label: param.rptStruDsc,
            busiSrcType: param.busiSrcType,
            disabled: true
          },param)
          parent.children = this.getchilds(param.rptStruId, params); //获取子节点
          result.push(parent)
        }
      }
      return result
    },
    getchilds(id, array) {
      let childs = new Array()
      for (let arr of array) { //循环获取子节点
        if (arr.parentStruId === id) {
          childs.push(
            Object.assign(arr,{
              id: arr.rptStruId,
              label: arr.rptStruDsc,
              busiSrcType: arr.busiSrcType,
              disabled: arr.busiSrcType === '20'? true : false
            })
          )
        }
      }
      for (let child of childs) { //获取子节点的子节点
        let childscopy = this.getchilds(child.id, array); //递归获取子节点
        //console.log(childscopy)
        if (childscopy.length > 0) {
          child.children = childscopy
        }
      }
      return childs
    },
    // 录入报告名称
    editreportname () {
      this.reportdialogVisible = false
    },
    checkChange1 (chkItem, chked) {
      if (chked.checkedNodes.length === 0) { // 一个节点都没有选
        return false
      } else if (chked.checkedNodes.length > 0) {
        let index = chked.checkedNodes.findIndex(item => item === chkItem)
        if (index !== -1) {
          let arr = []
          arr.push(chkItem)
          this.$refs.tree.setCheckedKeys([])
          this.$refs.tree.setCheckedNodes(arr)
        }
      }
    },
    // 添加底稿至框架
    sureAddToFrame () {
      console.log(this.$refs.tree.getCheckedNodes())
      this.append(this.$refs.tree.getCheckedNodes()[0],this.checkeddraft)
      for(let i=0; i < this.checkeddraft.length; i++){
        let index = this.data0[0].children[0].children.findIndex(item => item.auditDraftId === this.checkeddraft[i].auditDraftId)
        this.data0[0].children[0].children.splice(index, 1)
      }
      this.dialogVisible1 = false
      console.log(this.checkeddraft)
    },
    // 复选框被点击时
    checkchange (chkItem, chked) {
      console.log(chkItem, chked)
      if (chked.checkedNodes.length === 0) { // 一个节点都没有选
        return false
      } else if (chked.checkedNodes.length > 0) {
        this.checkeddraft = []
        chked.checkedNodes.forEach(item => {
          if (item.auditDraftId) {
            this.checkeddraft.push(item)
          }
        })
        console.log(this.checkeddraft)
      }
    },
    // 弹出底稿放入框架所在节点
    addToFrame () {
      this.dialogVisible1 = true
      this.data3 = this.data1[0].children
    },
    append(data,arr) {
      console.log(data,arr)
      if (!data.children) {
        this.$set(data, 'children', [])
        }
      for (let i = 1; i <= arr.length; i++){
        let item = arr[i-1]
        let obj = {
          auditGrpId: "10000001",
          auditPrjId: "00000001",
          auditRptId: null,
          busiSrcType: "20",
          documouldItmId: data.busiSrcId,
          dsplOrder: data.children.length + i,
          parentStruId: data.rptStruId,
          rcrdCrtTm: "",
          rcrdCrtpsnId: "0001",
          rcrdCrtpsnNm: "0001",
          rcrdUptTm: "",
          rcrdUptpsnId: "0001",
          rcrdUptpsnNm: "0001",
          rptStruDsc: item.label,
          rptStruId: '',
          busiSrcId: item.auditDraftId
        }
        let newChild = Object.assign(item,obj,{ id: guid(), disabled: true, busiSrcId: item.auditDraftId, children: [], label: item.label})
        newChild.rptStruId = newChild.id
        obj.rptStruId = newChild.id
        if (data.children.findIndex(element => (element.busiSrcId === item.auditDraftId) === -1)) {
          this.outlinelist.push(obj)
          data.children.push(newChild)
        }
      }
      },
      remove(node, data) {
        let parent = node.parent;
        let children = parent.data.children || parent.data
        let index = children.findIndex(d => d.id === data.id)
        let rptStruIdIndex = this.outlinelist.findIndex(item => item.rptStruId === data.id)
        // let draftIndex = this.data0[0].children[0].children.findIndex(element => element.auditDraftId === data.busiSrcId)
        // console.log(draftIndex)
        // this.data0[0].children[0].children[draftIndex].disabled = false
        // this.data0[0].children[0].children.splice(draftIndex, 1, this.data0[0].children[0].children[draftIndex])
        data.disabled = false
        this.data0[0].children[0].children.push(data)
        console.log(this.data0)
        this.outlinelist.splice(rptStruIdIndex, 1)
        children.splice(index, 1)
      },
    // 录入提纲名称
    sureoutlineNm () {
      this.show = true
      this.dialogVisible = false
      console.log(this.data1)
    // 生成报告提纲
      let info = {
        //auditRptId;			//审计报告id
        auditPrjId:	'00000001',	//审计项目id
        auditPrjName:	'预埋经济责任审计1',//审计项目名称
        auditGroupId:	'10000001',	//审计组
        auditGroupName:	'湖北子审计组',//审计组名称
        operPsnId:	'0001',//操作人id
        operPsnName:	'0001',//操作人名称
        // operPsnInstId:	'',//操作人机构id
        // operPsnInstName:	''//操作人机构名称
        rptOutln:{
            auditRptId:"",
            rptOutlnDsc:this.outlineNm,
            nodeId:"",
            auditGrpId:"10000001",
            auditPrjId:"00000001",
            rcrdCrtTm:"",
            rcrdCrtpsnId:"0001",//创建人
            rcrdCrtpsnNm:"0001",//创建人
            rcrdUptTm:"",
            rcrdUptpsnId:"",//更新人
            rcrdUptpsnNm:""//更新人
        },
        rptStruList: this.outlinelist
        }
    this.data2 = []
    axios.post('http://localhost:7111/tOesRpt/createTOesRpt', info).then((response) => {
      console.log(response)
      if (response && response.data && Array.isArray(response.data)) {
        // response.data.forEach(item =>{
        //   if (item.prtOutlnitmId === '0' || item.busiSrcType === '20') {
        //     item.disabled = true
        //   } else {
        //     item.disabled = false
        //   }
        // })
        this.data2 =  this.getOutLineTree(response.data)
        console.log(this.data2)
      }
    }).catch((response) => {
      console.log(response)
    })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    showTree() {
      this.outlineNm = ''
      this.dialogVisible = true

    },
    jumpToTest() {
      this.reportname = ''
      this.reportdialogVisible = true
      // this.$router.push('/auditOperationPage/test')
    },
    jumpToOutLinePage() {
      this.type = 2;
    },
    backToReportPage() {
      this.$router.push({
        path: '/auditOperationPage/auditreport'
      });
    },
    handleDragStart(node, ev) {
      console.log('drag start', node);
    },
    handleDragEnter(draggingNode, dropNode, ev) {
      console.log('tree drag enter: ', dropNode.label);
    },
    handleDragLeave(draggingNode, dropNode, ev) {
      console.log('tree drag leave: ', dropNode.label);
    },
    handleDragOver(draggingNode, dropNode, ev) {
      console.log('tree drag over: ', dropNode.label);
    },
    handleDragEnd(draggingNode, dropNode, dropType, ev) {
      console.log('tree drag end: ', dropNode && dropNode.label, dropType);
    },
    handleDrop(draggingNode, dropNode, dropType, ev) {
      console.log('tree drop: ', dropNode.label, dropType);
    },
    allowDrop(draggingNode, dropNode, type) {
      if (dropNode.data.label == '二级 3-1') {
        return type !== 'inner';
      } else {
        return true;
      }
    },
    allowDrag(draggingNode) {
      return draggingNode.data.label.indexOf('三级 3-2-2') == -1;
    },
    didi(myinfo) {
      this.myflag = true;
      this.mytitle = myinfo;
    }
  }
}
</script>

<style lang="less" scoped>
.bottom-row {
  width: 100%;
  margin-left: 10px;
}

.col-item {
  width: 100%;
  height: 500px;
  box-sizing: border-box;
  padding: 0 20px;
  background-color: #ccd0d7;
  font: 16px/40px "PingFangSC-Medium";
  color: #455f85;
}

.btn-right {
  float: right;
}

.btn-right-side {
  margin-right: 40px;
}

.btn-left {
  margin-left: 10px;
}

.content-dialog {
  width: 1000px;
  position: absolute;
  top: 10%;
  left: 10%;
}

.content-dialog-select {
  width: 100%;
}

.content-row {
  margin-top: -5px;
  margin-bottom: 5px;
  height: 20px;
}

.content-leftbtn {
  position: absolute;
  // left: 20px;
}

.content-rightbtn {
  position: absolute;
  right: 0;
}

el-col {
  border-bottom-width: 2px;
}

.content-operation {
  font-size: 16px;
  line-height: 40px;
  color: #455f85;
  background-color: #ccd0d7;
  width: 94.5%;
  height: 40px;
  padding-left: 20px;
}

.content-cotainer {
  padding: 0 20px 20px 20px;
  height: 100%;
}

.inner-box {
      width: 100%;
      height: calc(100% - 72px);
      display: flex;
      justify-content: flex-start;
      .inner-header {
        width: 100%;
        height: 40px;
        box-sizing: border-box;
        padding: 0 20px;
        background-color: #ccd0d7;
        font: 16px/40px "PingFangSC-Medium";
        color: #455f85;
      }
      .inner-left {
        width: 350px;
        height: 100%;
        border: 1px solid #cccccc;
        margin-right: 20px;
        border-radius: 1px;
        /deep/ .el-tree-node__label {
          color: #333333;
          font: 12px/32px "PingFangSC-Regular";
        }
        /deep/.el-tree-node__content .el-icon-caret-right:before {
          content: "\e6dc";
        }
        /deep/.el-tree:first-child>.el-tree-node:first-child>.el-tree-node__content:first-child>.el-icon-caret-right:before{
          content: "\e6dc";
          color: red;

        }
        
        /deep/ .is-leaf {
          color: none;
          visibility: hidden;
        }
        /deep/ .el-tree-node:focus > .el-tree-node__content {
          background-color: #6c8ab6;
          border-radius: 4px;
          color: red;
          .el-tree-node__label {
            color: #fff;
          }
          .el-icon-caret-right:before {
            color: #fff;
          }
        }
      }
      .inner-right {
        width: 350px;
        height: 400px;
        border: 1px solid #cccccc;
        border-radius: 6px;
      }
      .inner-center {
        width: 350px;
        height: 400px;
        margin-right: 20px;
        border: 1px solid #cccccc;
        border-radius: 6px;
      }
    }
    .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>
